<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style type="text/css">
        html,body {
            height: 100%;
            margin: 0;
        }
        .main {
            border: 1px solid red;
            width: calc(100% - 40px);
            margin: 20px;
            position: relative;
            display: flex;
        }
        .main .small-img {
            width: 400px;
        }
        .main .small-img img {
            width: 50%;
        }
        .main .small-img span {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            cursor: move;
            border: 1px solid red;
            display: none;
        }
        .main .big-img {
            overflow: hidden;
            width: 400px;
            /*border: 1px solid #ccc;*/
            position: absolute;
            left: 410px;
            top: 0;
            height: 100%;
            display: none;
        }
        .main .big-img img {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
<div class="main">
    <div id="smallImg" class="small-img" onmousemove="mouseMove(event)" onmouseout="mouseOut(this)">
        <img id="smallImgVal" src="img1.jpg">
        <span id="viewBox" ></span>
    </div>
    <div id="bigImg" class="big-img">
        <img id="bigImgVal" src="img1.jpg" />
    </div>
</div>
<script type="text/javascript">
    function mouseMove (event) {
        let e = event || window.event
        toggleShow('block')
        let smallImgVal = document.getElementById('smallImgVal')
        let  bigImg = document.getElementById('bigImg')
        let bigImgVal = document.getElementById('bigImgVal')
        let viewBox = document.getElementById('viewBox')
        let pageX = smallImgVal.getBoundingClientRect().left + document.documentElement.scrollLeft
        let pageY = smallImgVal.getBoundingClientRect().top + document.documentElement.scrollTop
        let mouseX = e.pageX - pageX
        let mouseY = e.pageY - pageY
        let viewBoxSize = viewBox.clientWidth
        let viewBoxCenter = viewBoxSize / 2
        let xMultiple = (mouseX) / (smallImgVal.offsetWidth - viewBoxCenter) // 计算比例
        let yMultiple = (mouseY) / (smallImgVal.offsetHeight - viewBoxCenter)
        if (mouseX < viewBoxCenter) {
            bigImgVal.style.left = 0 +'px'
            viewBox.style.left = 0 + 'px'
        }
        if (mouseX > viewBoxCenter && mouseX < smallImgVal.offsetWidth - viewBoxCenter) {
            bigImgVal.style.left = -xMultiple * (bigImgVal.offsetWidth - bigImg.offsetWidth) +'px'
            viewBox.style.left = mouseX - viewBoxCenter + 'px'
        }
        if (mouseX > smallImgVal.offsetWidth - viewBoxCenter) {
            bigImgVal.style.left = -(bigImgVal.offsetWidth - bigImg.offsetWidth) +'px'
            viewBox.style.left = smallImgVal.offsetWidth - viewBoxSize + 'px'
        }
        if (mouseY < viewBoxCenter) {
            bigImgVal.style.top = 0 +'px'
            viewBox.style.top = 0 + 'px'
        }
        if (mouseY > viewBoxCenter && mouseY < smallImgVal.offsetHeight - viewBoxCenter) {
            bigImgVal.style.top = -yMultiple * (bigImgVal.offsetHeight - bigImg.offsetHeight) +'px'
            viewBox.style.top = mouseY - viewBoxCenter + 'px'
        }
        if (mouseY > smallImgVal.offsetHeight - viewBoxCenter) {
            bigImgVal.style.top = -(bigImgVal.offsetHeight - bigImg.offsetHeight) +'px'
            viewBox.style.top = smallImgVal.offsetHeight - viewBoxSize + 'px'
        }
    }

    function mouseOut (event) {
        toggleShow('none')
    }

    function toggleShow (display) {
        let viewBox = document.getElementById('viewBox')
        let bigImg = document.getElementById('bigImg')
        let bigImgVal = document.getElementById('bigImgVal')
        viewBox.style.display = display
        bigImg.style.display = display
        bigImgVal.style.display = display
    }

</script>
</body>
</html>
